<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 比如当我们要把一整个data中的person中的值都给属性时，可以不用一个个的去写，而是直接写person，注意这个时候v-bind不能简写成":"
        这里把两种方式都写一遍，差距一眼便知
        -->
        <div :name="person.name" :age="person.age" :sex="person.sex">一个个的写</div>
        <div v-bind="person">直接写进去</div>
    </div>
</body>

</html>
<script src="../../../vue.js"></script>
<script>
    Vue.config.productionTip = false;

    const vm = new Vue({
        el: "#app",
        data() {
            return {
                person: {
                    name: "xiaowang",
                    age: 18,
                    sex: "男",
                },
            };
        },
    });
</script>